<template>
	<div class="bigDiv">
		<!-- <el-switch
			  v-model="isDark"
			  		:active-value="1"
			  		:inactive-value="0"
			  @change="switchChange()">
			</el-switch> -->

		<div style="width: 100%;height: 410px;margin: 0px auto;" id="1">
			<el-row type="flex" class="row-bg" justify="center">
				<el-col :span="5">
					<div style="padding:30px 30px 0px 30px;text-align:center">
						<div class="leiJI" style="font-family:math;font-size: 18px;font-weight: 550;color:#304156;">
							2023年累计订单金额</div>
						<div class="jinE1">{{this.sumBudYear}} 万元</div>
						<div style="padding-top:10px;font-size: 20px;color:#003650;font-family: ledFont">
							2023年全部下单金额{{this.yearBuyCount}}万元</div>
					</div>
					<div style="padding:30px;margin-top: 20px;text-align:center">
						<div class="leiJI">2023年收入金额</div>
						<div class="jinE2">{{this.benNianXiaoShouShouR}} 万元</div>
						<div style="padding-top:20px;font-size: 20px;color:#003650;font-family:ledFont">
							年度累计可对账金额{{this.canReconciliationCount}}万元</div>
						<div style="font-size: 10px;color:#989898;font-family:italic">注：预计可对账金额取供应商推订单的平均时间加项目经理平均对账周期
						</div>
					</div>
				</el-col>
				<el-col :span="5">
					<div style="padding:30px;text-align:center">
						<div class="leiJI" style="font-weight: 550">本月订单金额</div>
						<div class="jinE1">{{this.yueManyCount}} 万元</div>
						<div style="padding-top:10px;font-size: 20px;color:#003650;font-family: ledFont">
							本月全部下单金额{{this.yueBuyCount}}万元</div>
					</div>
					<div style="margin-top: 20px;text-align:center">
						<div class="leiJI">本月收入金额</div>
						<div class="jinE1">{{this.benYueShouRJinE}} 万元</div>
						<div style="padding-top:20px;font-size: 20px;color:#003650;font-family:ledFont">
							本月预计可对账金额{{this.benYueYuJiDuiZhang}}万元</div>
						<!-- <div style="font-size: 10px;color:#989898;font-family:italic">注：预计可对账金额取供应商推订单的平均时间加项目经理平均对账周期</div> -->
					</div>
				</el-col>
				<el-col :span="5">
					<div style="padding:30px;text-align:center">
						<div class="leiJI">本周订单金额</div>
						<div class="jinE2">{{this.lastZhouPrice}} 万元</div>
					</div>
					<div style="padding:30px;margin-top: 30px;text-align:center">
						<div class="leiJI">本周收入金额</div>
						<div class="jinE2">{{this.benZhouShouRJinE}} 万元</div>
					</div>
				</el-col>
				<el-col :span="5">
					<div style="padding:30px 30px 30px 30px;text-align:center">
						<div class="leiJI">今日订单金额</div>
						<div class="jinE3">{{this.jinRDingDanJinE}} 万元</div>
					</div>
					<div style="padding:30px;margin-top: 30px;text-align:center">
						<div class="leiJI">上月收入金额</div>
						<div class="jinE2">{{this.shangYueShouRJinE}} 万元</div>
						<div style="padding-top:20px;font-size: 20px;color:#003650;font-family:ledFont">上月预计可对账金额
							{{this.shangYueDingDanJinE}}万元
						</div>
						<!-- <div style="font-size: 10px;color:#989898;font-family:italic">注：预计可对账金额取供应商推订单的平均时间加项目经理平均对账周期</div> -->
					</div>
				</el-col>
			</el-row>
			<el-row>
			</el-row>
		</div>
		<div style="width: 100%;height: 500px;margin: 0px auto;" id="main1">
		</div>
		<div style="width: 100%;height: 500px;margin:0px auto;" id="main2">
		</div>
		<div style="width: 100%;height: 500px;margin:0px auto;" id="main3">
		</div>


	</div>
</template>

<script>
	import echarts from 'echarts';
	import {
		getGuanLiCangYear,
		getGuanLiCangYearNew,
		getGuanLiCangMonthNew,
		getGuanLiCangMonth,
		guanLiCangCount,
		benYueYuJiDuiZhang,
		jinRDingDanJinE,
		benZhouShouRJinE,
		benYueShouRJinE,
		shangYueShouRJinE,
		benNianXiaoShouShouR,
		shangYueDingDanJinE,
		yearBuyCount,
		canReconciliationCount,
		yueBuyCount,
		zuiJinMonthCount
	} from "@/api/leader/leaderapi";
	require("echarts/theme/dark")
	const colors = ['#73a15c', '#EE6666'];
	export default {
		name: "echarts",
		data() {
			return {
				guanLiCangList: [],
				guanLiCangListN: [],
				// 2023年价格数组
				arrThisYearPrice: [],
				// 2022年价格数组
				arrLastYearPrice: [],
				// 2023年年份数组
				arrThisYear: [],
				// 2022年年份数组
				arrLastYear: [],
				guanLiCangMonth: [],
				guanLiCangMonthN: [],
				arrThisMonthPrice: [],
				arrLastMonthPrice: [],
				arrThisMonth: [],
				arrLastMonth: [],
				zuiJinMonthCount: [],
				zuiJinDayCount: [],
				arrThisDay: [],
				sumYue:'',
				myChart: null,
				myChart2: null,
				myChart3: null,
				isBig: 0,
				isBig2: 0,
				isBig3: 0,
				thisMonth: '',
				lastMonth: '',
				dateValue: '',
				yueManyCount: '',
				lastZhouPrice: '',
				//2023年每月销售额
				arrTYPriceAll: [],
				sumBudYear: '',
				benYueYuJiDuiZhang: '',
				jinRDingDanJinE: '',
				benZhouShouRJinE: '',
				benYueShouRJinE: '',
				shangYueShouRJinE: '',
				shangYueDingDanJinE: '',
				benNianXiaoShouShouR: '',
				yearBuyCount: '',
				canReconciliationCount: '',
				yueBuyCount: ''
			}
		},
		//初始化
		mounted() {
			this.getThisYearPrice();
			this.getThisMonthPrice();
			this.getGuanLiCangCount();
			this.getOtherDate();
			this.getZuiJinMonthCount();
		},
		methods: {

			// 获取管理仓上其他数据
			getOtherDate() {
				//本月预计可对账金额
				benYueYuJiDuiZhang().then(e => {
					this.benYueYuJiDuiZhang = parseInt(e[0].sum)
				})
				//今日订单金额
				jinRDingDanJinE().then(e => {
					this.jinRDingDanJinE = e[0].sum
				})
				//本周收入金额
				benZhouShouRJinE().then(e => {
					this.benZhouShouRJinE = parseInt(e[0].sum)
				})
				//本月收入金额
				benYueShouRJinE().then(e => {
					this.benYueShouRJinE = parseInt(e[0].sum)
				})
				//上月收入金额
				shangYueShouRJinE().then(e => {
					this.shangYueShouRJinE = parseInt(e[0].sum)
				})
				//上月订单金额
				shangYueDingDanJinE().then(e => {
					this.shangYueDingDanJinE = parseInt(e[0].sum)
				})
				//本年销售金额
				benNianXiaoShouShouR().then(e => {
					this.benNianXiaoShouShouR = parseInt(e[0].sum)
				})
				//本年全部下单金额
				yearBuyCount().then(e => {
					this.yearBuyCount = parseInt(e[0].sum)
				})
				//年度累计可对账金额
				canReconciliationCount().then(e => {
					this.canReconciliationCount = parseInt(e[0].sum)
				})
				//本月全部下单金额
				yueBuyCount().then(e => {
					this.yueBuyCount = parseInt(e[0].sum)
				})

			},
			// 获取2022年度数据
			getLastYearPrice() {
				getGuanLiCangYear().then(res => {
					this.guanLiCangList = res;
					//循环获取2022年总销售额
					this.guanLiCangList.forEach(e => {
						this.arrLastYearPrice.push(e.sumBud.toFixed(2))
					})

					//循环获取2022年年份	
					this.guanLiCangList.forEach(e => {
						this.arrLastYear.push(e.mont)
					})

					this.echartsInit();
				})

			},

			getGuanLiCangCount() {

				guanLiCangCount().then(e => {

					this.yueManyCount = parseInt(e[0].sumNum)
					console.log('87', this.yueManyCount)
				})


			},
			// 获取2023年度数据
			getThisYearPrice() {
				getGuanLiCangYearNew().then(res => {
					this.guanLiCangListN = res;

					//循环获取2023年总销售额
					this.guanLiCangListN.forEach(e => {
						this.arrThisYearPrice.push(e.sumBud.toFixed(2))
						this.arrTYPriceAll.push(e.sumBud)
					})
					//字符串数字转数字数组
					//处理今年销售额数据加和	
					let numArray = this.arrTYPriceAll.map(Number);
					//求和函数
					function sum(arr) {
						return eval(arr.join("+"));
					};
					this.sumBudYear = sum(numArray).toFixed(0)
					console.log('68', this.sumBudYear)

					//循环获取2023年年份
					this.guanLiCangListN.forEach(e => {
						this.arrThisYear.push(e.mont)
					})
					console.log('74', this.arrThisYear)

					this.getLastYearPrice();
				})

			},
			// 获取2022月度数据
			getLastMonthPrice() {
				getGuanLiCangMonth().then(res => {
					this.guanLiCangMonth = res;
					this.guanLiCangMonth.forEach(e => {
						if (Boolean(e.sumBud)) {
							this.arrLastMonthPrice.push(e.sumBud.toFixed(2))
						}

					})
					console.log('100', this.arrLastMonthPrice)

					//循环获取上一年本月周次	
					this.guanLiCangMonth.forEach(e => {
						this.arrLastMonth.push(e.weeks)
					})
					console.log('106', this.arrLastMonth)

					this.echartsInit2();
					this.echartsInit3();
				})
			},

			// 获取2023月度数据
			getThisMonthPrice() {
				getGuanLiCangMonthNew().then(res => {
					this.guanLiCangMonthN = res;

					console.log('116', this.guanLiCangMonthN)
					this.guanLiCangMonthN.forEach(e => {
						if (Boolean(e.sumBud)) {
							this.arrThisMonthPrice.push(e.sumBud.toFixed(2))
						}
					})
					console.log('118', this.arrThisMonthPrice)
					this.lastZhouPrice = this.arrThisMonthPrice[this.arrThisMonthPrice.length - 1]

					this.guanLiCangMonthN.forEach(e => {
						this.arrThisMonth.push(e.weeks)
					})
					console.log('124', this.arrThisMonth)
					//获取当月月份和上月月份
					this.thisMonth = new Date().getMonth() + 1;
					this.lastMonth = new Date().getMonth();

					this.getLastMonthPrice();
				})

			},
			//获取最近一个月销售情况（每天）
			getZuiJinMonthCount() {
				zuiJinMonthCount().then(res => {
					this.zuiJinMonthCount = res;
					console.log('317', this.zuiJinMonthCount)
					//获取到最近30天日期
					this.zuiJinMonthCount.forEach(e => {
						if (Boolean(e.date)) {
							this.arrThisDay.push(e.date)
						}
					})
					console.log('325', this.arrThisDay)

					//获取最近30天销售金额
					this.zuiJinMonthCount.forEach(e => {
						this.zuiJinDayCount.push(Number(e.sum).toFixed(2))
						
					})
					//字符串数字转数字数组
					//处理今年销售额数据加和	
					this.zuiJinDayCount = this.zuiJinDayCount.map(Number);
					//求和函数
					// function sum(arr) {
					// 	return eval(arr.join("+"));
					// };
					// this.sumYue = sum(numArray)
					// console.log('342', this.sumYue)
				})
			},


			// 进入折线图1
			echartsInit() {
				var that = this;
				console.log('80', this.arrThisYearPrice)
				this.myChart = echarts.init(document.getElementById('main1'));
				this.myChart.setOption({
					color: colors,
					title: {
						text: '年度销售额展示(本月销售总额：' + this.yueManyCount + '万元)',
						textStyle: {
							color: '#333333',
							fontWeight: 'bold',
							fontSize: 25
						}
					},
					tooltip: {
						trigger: 'axis', // 触发类型，默认数据触发，可选为：'item' ¦ 'axis'
						showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
						hideDelay: 100, // 隐藏延迟，单位ms
						transitionDuration: 0.4, // 动画变换时间，单位s
						backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色，默认为透明度为0.7的                
						borderColor: '#333', // 提示边框颜色
						borderRadius: 4, // 提示边框圆角，单位px，默认为4
						borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
						padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'line', // 默认为直线，可选为：'line' | 'shadow'
							lineStyle: { // 直线指示器样式设置
								color: '#48b',
								width: 2,
								type: 'solid'
							},
							shadowStyle: { // 阴影指示器样式设置
								width: 'auto', // 阴影大小
								color: 'rgba(150,150,150,0.3)' // 阴影颜色
							}
						},
						textStyle: {
							color: '#fff'
						}
						// ,
						// formatter:function(res){
						// 	var arr = res;
						// 	var domstr = arr[0].axisValue+"月:";
						// 	for (var i = 0; i < arr.length; i++) {
						// 		domstr += "<div><span style='background:red;'>1</span>"+arr[i].seriesName+"<br>"+arr[i].data+"</div>"
						// 	}
						// 	return domstr;
						// }
					},
					toolbox: {
						show: true,
						feature: {
							dataView: { //数据视图
								show: true
							},
							restore: { //重置 
								show: true
							},
							dataZoom: { //数据缩放视图
								show: true
							},
							saveAsImage: { //保存图片
								show: true
							},
							magicType: { //动态类型切换
								type: ['bar', 'line']
							},
							myFull: { // 全屏
								show: true,
								title: '全屏',
								icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
								onclick: (e) => {
									// 全屏查看
									var domName = document.getElementById('main1')
									if (domName.requestFullScreen) { // HTML W3C 提议

										domName.requestFullScreen()
									} else if (domName.msRequestFullscreen) { // IE11

										domName.msRequestFullScreen()
									} else if (domName.webkitRequestFullScreen) { // Webkit

										domName.webkitRequestFullScreen()
									} else if (domName.mozRequestFullScreen) { // Firefox

										domName.mozRequestFullScreen()
									}
									// 退出全屏
									if (domName.requestFullScreen) {

										document.exitFullscreen()
									} else if (domName.msRequestFullScreen) {

										document.msExitFullscreen()
									} else if (domName.webkitRequestFullScreen) {

										document.webkitCancelFullScreen()
									} else if (domName.mozRequestFullScreen) {

										document.mozCancelFullScreen()
									}

									var option = this.myChart.getOption();
									this.myChart.dispose();
									setTimeout(function() {
										that.myChart = echarts.init(document.getElementById('main1'));
										that.myChart.setOption(option);
									}, 500);

								}
							}
						}
					},
					legend: {
						y: 20
					},
					grid: {
						top: 100,
						bottom: 50
					},
					xAxis: [{
						name: '月份',
						axisTick: {
							alignWithLabel: true
						},
						// prettier-ignore
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月',
							'8月', '9月', '10月', '11月', '12月'
						]
					}],
					yAxis: [{
						type: 'value',
						name: '销售额(万元)',
						nameGap: 30, // 坐标轴名称与轴线之间的距离

					}],
					series: [{
							name: '2022年月度销售额',
							type: 'line',
							smooth: true,
							itemStyle: {
								normal: {
									label: {
										show: true
									}
								}
							},
							emphasis: {
								focus: 'series'
							},
							data: this.arrLastYearPrice,
							// areaStyle: {normal: {
							// 	color: new echarts.graphic.LinearGradient(
							// 			0, 0, 0, 1,
							// 			[
							// 				{offset: 0, color: '#accc9b'},
							// 				{offset: 0.5, color: '#8dcc51'},
							// 				{offset: 1, color: '#36cc14'}
							// 			]
							// 	)
							// }}
						},
						{
							name: '2023年月度销售额',
							type: 'line',
							smooth: true,
							itemStyle: {
								normal: {
									label: {
										show: true
									}
								}
							},
							emphasis: {
								focus: 'series'
							},
							data: this.arrThisYearPrice
						}
					]
				})
			},

			echartsInit2() {
				var that = this;
				console.log('80', this.arrThisYearPrice)
				this.myChart2 = echarts.init(document.getElementById('main2'));
				this.myChart2.setOption({
					color: colors,
					title: {
						text: '月度销售额展示',
						textStyle: {
							color: '#333333',
							fontWeight: 'bold',
							fontSize: 25
						}
					},
					tooltip: {
						trigger: 'axis', // 触发类型，默认数据触发，可选为：'item' ¦ 'axis'
						showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
						hideDelay: 100, // 隐藏延迟，单位ms
						transitionDuration: 0.4, // 动画变换时间，单位s
						backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色，默认为透明度为0.7的                
						borderColor: '#333', // 提示边框颜色
						borderRadius: 4, // 提示边框圆角，单位px，默认为4
						borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
						padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'line', // 默认为直线，可选为：'line' | 'shadow'
							lineStyle: { // 直线指示器样式设置
								color: '#48b',
								width: 2,
								type: 'solid'
							},
							shadowStyle: { // 阴影指示器样式设置
								width: 'auto', // 阴影大小
								color: 'rgba(150,150,150,0.3)' // 阴影颜色
							}
						},
						textStyle: {
							color: '#fff'
						}
						// ,
						// formatter:function(res){
						// 	var arr = res;
						// 	var domstr = arr[0].axisValue+"月:";
						// 	for (var i = 0; i < arr.length; i++) {
						// 		domstr += "<div><span style='background:red;'>1</span>"+arr[i].seriesName+"<br>"+arr[i].data+"</div>"
						// 	}
						// 	return domstr;
						// }
					},
					toolbox: {
						show: true,
						feature: {
							dataView: { //数据视图
								show: true
							},
							restore: { //重置 
								show: true
							},
							dataZoom: { //数据缩放视图
								show: true
							},
							saveAsImage: { //保存图片
								show: true
							},
							magicType: { //动态类型切换
								type: ['bar', 'line']
							},
							myFull: { // 全屏
								show: true,
								title: '全屏',
								icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
								onclick: (e) => {
									// 全屏查看
									var domName = document.getElementById('main2')
									if (domName.requestFullScreen) { // HTML W3C 提议

										domName.requestFullScreen()
									} else if (domName.msRequestFullscreen) { // IE11

										domName.msRequestFullScreen()
									} else if (domName.webkitRequestFullScreen) { // Webkit

										domName.webkitRequestFullScreen()
									} else if (domName.mozRequestFullScreen) { // Firefox

										domName.mozRequestFullScreen()
									}
									// 退出全屏
									if (domName.requestFullScreen) {

										document.exitFullscreen()
									} else if (domName.msRequestFullScreen) {

										document.msExitFullscreen()
									} else if (domName.webkitRequestFullScreen) {

										document.webkitCancelFullScreen()
									} else if (domName.mozRequestFullScreen) {

										document.mozCancelFullScreen()
									}

									var option = this.myChart2.getOption();
									this.myChart2.dispose();
									setTimeout(function() {
										that.myChart2 = echarts.init(document.getElementById('main2'));
										that.myChart2.setOption(option);
									}, 500);

								}
							}
						}
					},
					legend: {
						y: 20
					},
					grid: {
						top: 100,
						bottom: 50
					},
					xAxis: [{
						name: '周次',
						axisTick: {
							alignWithLabel: true
						},
						// prettier-ignore
						data: ['第一周', '第二周', '第三周', '第四周', '第五周']
					}],
					yAxis: [{
						type: 'value',
						name: '销售额(万元)',
						nameGap: 30, // 坐标轴名称与轴线之间的距离

					}],
					series: [{
							name: '2023年' + this.lastMonth + '月周销售额',
							type: 'line',
							smooth: true,
							itemStyle: {
								normal: {
									label: {
										show: true
									}
								}
							},
							emphasis: {
								focus: 'series'
							},
							data: this.arrLastMonthPrice,

						},
						{
							name: '2023年' + this.thisMonth + '月周销售额',
							type: 'line',
							smooth: true,
							itemStyle: {
								normal: {
									label: {
										show: true
									}
								}
							},
							emphasis: {
								focus: 'series'
							},
							data: this.arrThisMonthPrice
						}
					]
				})
			},
			echartsInit3() {
				var that = this;
				console.log('675', this.arrThisYearPrice)
				this.myChart3 = echarts.init(document.getElementById('main3'));
				this.myChart3.setOption({
					color: colors,
					title: {
						text: '本月销售额展示',
						textStyle: {
							color: '#333333',
							fontWeight: 'bold',
							fontSize: 25
						}
					},
					tooltip: {
						trigger: 'axis', // 触发类型，默认数据触发，可选为：'item' ¦ 'axis'
						showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
						hideDelay: 100, // 隐藏延迟，单位ms
						transitionDuration: 0.4, // 动画变换时间，单位s
						backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色，默认为透明度为0.7的                
						borderColor: '#333', // 提示边框颜色
						borderRadius: 4, // 提示边框圆角，单位px，默认为4
						borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
						padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'line', // 默认为直线，可选为：'line' | 'shadow'
							lineStyle: { // 直线指示器样式设置
								color: '#83aabb',
								width: 2,
								type: 'solid'
							},
							shadowStyle: { // 阴影指示器样式设置
								width: 'auto', // 阴影大小
								color: 'rgba(150,150,150,0.3)' // 阴影颜色
							}
						},
						textStyle: {
							color: '#fff'
						}
						,
						formatter:function(res){
							var arr = res
							var str = ''
							var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#6392ff"></span>'
							// console.log('733',res);
							res.forEach(item=>{
								str += dotHtml +" "+item.axisValue + " : " + item.data + "万元"
							})
							return str
							// var domstr = arr[0].axisValue+"月:";
							// for (var i = 0; i < arr.length; i++) {
							// 	domstr += "<div><span style='background:red;'>1</span>"+arr[i].seriesName+"<br>"+arr[i].data+"</div>"
							// }
							// return domstr;
						}
					},
					toolbox: {
						show: true,
						feature: {
							dataView: { //数据视图
								show: true
							},
							restore: { //重置 
								show: true
							},
							dataZoom: { //数据缩放视图
								show: true
							},
							saveAsImage: { //保存图片
								show: true
							},
							magicType: { //动态类型切换
								type: ['bar', 'line']
							},
							myFull: { // 全屏
								show: true,
								title: '全屏',
								icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
								onclick: (e) => {
									// 全屏查看
									var domName = document.getElementById('main3')
									if (domName.requestFullScreen) { // HTML W3C 提议

										domName.requestFullScreen()
									} else if (domName.msRequestFullscreen) { // IE11

										domName.msRequestFullScreen()
									} else if (domName.webkitRequestFullScreen) { // Webkit

										domName.webkitRequestFullScreen()
									} else if (domName.mozRequestFullScreen) { // Firefox

										domName.mozRequestFullScreen()
									}
									// 退出全屏
									if (domName.requestFullScreen) {

										document.exitFullscreen()
									} else if (domName.msRequestFullScreen) {

										document.msExitFullscreen()
									} else if (domName.webkitRequestFullScreen) {

										document.webkitCancelFullScreen()
									} else if (domName.mozRequestFullScreen) {

										document.mozCancelFullScreen()
									}

									var option = this.myChart3.getOption();
									this.myChart3.dispose();
									setTimeout(function() {
										that.myChart3 = echarts.init(document.getElementById('main3'));
										that.myChart3.setOption(option);
									}, 2000);

								}
							}
						}
					},
					legend: {
						y: 20
					},
					grid: {
						top: 100,
						bottom: 50
					},
					xAxis: [{
						name: '日期',
						axisTick: {
							alignWithLabel: true
						},
						// prettier-ignore
						data: this.arrThisDay
					}],
					yAxis: [{
						type: 'value',
						name: '销售额(万元)',
						nameGap: 30, // 坐标轴名称与轴线之间的距离

					}],
					series: [{
						name: '2023年最近30天销售情况',
						markLine : {
							   data : [
								   {type : 'average',name : '平均值'}
							   ]
						},
						type: 'bar',
						smooth: true,
						itemStyle: {
							normal: {
								label: {
									show: true,
									position: 'top'
								},
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#83bff6'
									},
									{
										offset: 0.5,
										color: '#188df0'
									},
									{
										offset: 1,
										color: '#188df0'
									}
								])
							}

						},
						emphasis: {
							focus: 'series',


						},
						data: this.zuiJinDayCount,
					}]
				})
			},

		}
	}
</script>

<style scoped>
	/* 引入lcd字体 */
	@font-face {
		font-family: "ledFont";
		src: url("./font/ds-digib-webfont.eot");
		/* IE9 Compat Modes */
		src: url("./font/ds-digib-webfont.eot?#iefix") format("embedded-opentype"),
			/*IE6-IE8 */
			url("./font/ds-digib-webfont.woff") format("woff"),
			/* Modern Browsers */
			url("./font/ds-digib-webfont.ttf") format("truetype"),
			/* Safari, Android, iOS */
			url("./font/ds-digib-webfont.svg") format("svg");
		/* Legacy iOS */
	}

	.leiJI {
		font-family: math;
		font-size: 18px;
		font-weight: 550;
		color: #304156;
	}

	.wanYan {
		display: inline-block;
	}

	.jinE1 {
		display: inline-blockp;
		text-shadow: 0 0 3px #ff5a4e;
		font-size: 35px;
		color: red;
		margin-top: 12px;
		font-family: ledFont;

	}

	.jinE2 {
		display: inline-blockp;
		text-shadow: 0 0 3px #0c255a;
		font-size: 35px;
		color: #00007f;
		margin-top: 12px;
		font-family: ledFont;

	}

	.jinE3 {
		display: inline-blockp;
		text-shadow: 0 0 3px #216442;
		font-size: 35px;
		color: #14630e;
		margin-top: 12px;
		font-family: ledFont;

	}

	#main1,
	#main2,
	#main3 {
		background: #fff;
	}
</style>
